<template>
  <div class="program flex flex-s">
    <div class="container h-100 flex flex-col relative">
      <Toolbar></Toolbar>
      <div class="dynamic-component" :style="{ height: `${height}px` }">
        <component :is="component"></component>
      </div>
      <Tabs></Tabs>

      <Loading></Loading>
      <Feedback></Feedback>
      <Notify></Notify>

      <Message></Message>
    </div>
    <div class="display-none"> 不支持小于375px的设备显示 </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue';
  import Loading from '@/views/components/loading/Loading.vue';
  import { useFullscreen } from '@vueuse/core';
  import Message from '@/views/components/message/Message.vue';
  import Tabs from './container/Tabs.vue';
  import { currentTab } from './container/tabs';
  import Feedback from './components/feedback/Feedback.vue';
  import Notify from './components/notify/Notify.vue';
  import Toolbar from './container/Toolbar.vue';
  import { fullscreen } from './container/container';

  const height = ref(window.innerHeight - 52);
  window.addEventListener('resize', () => {
    const { isFullscreen } = useFullscreen();
    fullscreen.value = isFullscreen.value;
    height.value = window.innerHeight - 52;
  });

  const component = computed(() => {
    return currentTab.value.component;
  });
</script>

<style lang="scss" scoped>
  .program {
    height: 100vh;
    .container {
      background-color: #fff;
      max-width: 750px;
      min-width: 375px;
      max-height: 900px;
      // min-height: 667px;
      width: 100%;
      overflow: hidden;
      height: 100%;
    }
  }
  .dynamic-component {
    height: calc(100% - 52px);
  }
  @media screen and (max-width: 300px) {
    .container {
      display: none;
    }
  }
  @media screen and (min-width: 300px) {
    .display-none {
      display: none;
    }
  }
</style>
